<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <h1>{{count}}</h1>

        <cart :count="count"></cart>

    </div>
</body>
<template id="cart">
    <div>
        <!-- vue 所谓的单向数据流，就是子组件只能使用父组件中的数据，但是不能修改 -->
        <!-- 父组件中传递过来的 count 值，咱们只能使用不能修改 -->
        <!-- <button @click="count++">{{count}}</button> -->


        <!-- 
            如果子组件要修改父组件的数据有两个方法
            1.在子组件中复制一份，然后改自己的东西
            2.告诉父组件，让父组件帮我们改好
         -->
        <button @click="num++">{{num}}</button>
    </div>
</template>
<script>
    const cart = {
        template: '#cart',
        props: ['count'],
        data () {
            return {
                num: this.count || 0
            }
        },
    }
    const app = Vue.createApp({
        data () {
            return {
                count: 100
            }
        },

        components: {
            cart: cart
        }
    })

    app.mount('#app')
</script>

</html>